<template>
  <div>
    <!-- 用户信息 -->
    <div class="centerTop">
      <div class="userInfos">
        <div class="userInfosLeft">
          <div class="userName">
            <span @click="getUserInfos">{{userInfos.nick}}</span>
            <router-link tag="div" to="/BaskInTheSun" class="BaskInTheSun">晒一晒</router-link>
          </div>
          <div class="listeTime">收听时长：{{userInfos.listenTimes}}小时</div>
          <div class="rankingBox">
            <span>周排名 {{userInfos.weekRank}}</span>
            <span>粉丝 {{userInfos.fansCount}}</span>
            <span>关注 {{userInfos.followCount}}</span>
          </div>
        </div>
        <div class="userInfosRight">
          <img
            v-lazy="isImgUrl ? userInfos.portrait : imgUrl+userInfos.portrait"
          />
        </div>
      </div>
      <div class="memberBox">
        <img src="../../../static/images/pic_vip_bg@2x.png" />
        <div class="memberInfos">
          <div class="memberInfosLeft">
            <div class="leftImg">
              <img src="../../../static/images/pic_logo2@2x.png" />
            </div>
            <div class="LeftInfos">
              <div class="LeftInfosOne">有氧FM</div>
              <div class="LeftInfosTwo" v-if="!userInfos.cardNo">关联获取更多权限</div>
              <div class="LeftInfosTwo" v-else>
                <!-- <img src="../../../static/images/icon_zhizun@2x.png" />
                <img src="../../../static/images/icon_gold@2x.png" />
                <img src="../../../static/images/icon_baiyin@2x.png" />
                <img src="../../../static/images/icon_qingtong@2x.png" />
                <img src="../../../static/images/icon_qingtong@2x.png" /> -->
                <template v-if="userInfos.vipLevel>=0 && userInfos.vipLevel<=1"><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_qingtong@2x.png' /></template>
                <template v-else-if="userInfos.vipLevel>2 && userInfos.vipLevel<=3"><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_qingtong@2x.png' /><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_qingtong@2x.png' /></template>
                <template v-else-if="userInfos.vipLevel>=4 && userInfos.vipLevel<=5"><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_qingtong@2x.png' /><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_qingtong@2x.png' /><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_qingtong@2x.png' /></template>
                <template v-else-if="userInfos.vipLevel>=6 && userInfos.vipLevel<=10"><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_baiyin@2x.png' /></template>
                <template v-else-if="userInfos.vipLevel>=11 && userInfos.vipLevel<=15"><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_baiyin@2x.png' /><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_baiyin@2x.png' /></template>
                <template v-else-if="userInfos.vipLevel>=16 && userInfos.vipLevel<=20"><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_baiyin@2x.png' /><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_baiyin@2x.png' /><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_baiyin@2x.png' /></template>
                <template v-else-if="userInfos.vipLevel>=21 && userInfos.vipLevel<=30"><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_gold@2x.png' /></template>
                <template v-else-if="userInfos.vipLevel>=31 && userInfos.vipLevel<=40"><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_gold@2x.png' /><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_gold@2x.png' /></template>
                <template v-else-if="userInfos.vipLevel>=41 && userInfos.vipLevel<=50"><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_gold@2x.png' /><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_gold@2x.png' /><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_gold@2x.png' /></template>
                <template v-else-if="userInfos.vipLevel>=51 && userInfos.vipLevel<=70"><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_zhizun@2x.png' /></template>
                <template v-else-if="userInfos.vipLevel>=71 && userInfos.vipLevel<=90"><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_zhizun@2x.png' /><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_zhizun@2x.png' /></template>
                <template v-else="userInfos.vipLevel>=91 && userInfos.vipLevel<=100"><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_zhizun@2x.png' /><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_zhizun@2x.png' /><img src='https://youyang-cdn.mdshuzhi.com/upload/icon_zhizun@2x.png' /></template>
              </div>
            </div>
          </div>
          <div class="memberInfosRight" v-if="!userInfos.cardNo" @click="AssociatedCardBtn">关联卡号</div>
          <div class="memberInfosRight" v-else>
            <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_level@2x.png" />
            <span>LV.{{userInfos.vipLevel}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 设置区域 -->
    <div class="centerBottom">
      <div class="collectBox">
        <!-- 收听历史 -->
        <div class="ListenToHistory">
          <!-- 头部 -->
          <div class="commentBox">
            <div class="settingBoxLeft">收听历史</div>
            <router-link tag="div" to="/ListenToHistory" class="settingBoxRight">
              <span>查看更多</span>
              <span class="rowBox"></span>
            </router-link>
          </div>
          <!-- 内容区 -->
          <div class="pictureBox">
            <router-link
              tag="div" 
              :to="'/Playing?audioId='+item.id"
              class="pictureItem"
              v-for="(item,index) in historyList"
              :key="index"
            >
              <div class="pictureItemBox">
                <img v-lazy="item.imgUrl" />
              </div>
              <span class="itemspan">{{item.title}}</span>
            </router-link>
          </div>
        </div>
        <!-- 我的收藏 -->
        <div class="MyCollection">
          <!-- 头部 -->
          <div class="commentBox">
            <div class="settingBoxLeft">我的收藏</div>
            <router-link tag="div" to="/MyCollection" class="settingBoxRight">
              <span>查看更多</span>
              <span class="rowBox"></span>
            </router-link>
          </div>
          <!-- 内容区 -->
          <div class="pictureBox">
            <router-link
              tag="div"
              :to="'/Playing?audioId='+item.rid"
              class="pictureItem"
              v-for="(item,index) in collectList"
              :key="index"
            >
              <div class="pictureItemBox">
                <img v-lazy="item.imgUrl" />
              </div>
              <span class="itemspan">{{item.title}}</span>
            </router-link>
          </div>
        </div>
        <!-- 关注的人 -->
        <div class="PeopleOfConcern">
          <div class="settingBoxLeft">关注的人</div>
          <router-link tag="div" to="/MyConcerns" class="settingBoxRight PeopleOfConcernBox">
            <div class="imgBox">
              <img
                class="imgBoxItem"
                v-lazy="item.portrait"
                v-for="(item,index) in followList"
                :key="index"
              />
            </div>
            <div class="rowBox"></div>
          </router-link>
        </div>
      </div>
      <!-- 我的评论 我的下载 设置 -->
      <div class="settingBox">
        <router-link to="/MyComments" class="MyComments commentBox">
          <div class="settingBoxLeft">我的评论</div>
          <div class="settingBoxRight">
            <span>查看</span>
            <span class="rowBox"></span>
          </div>
        </router-link>
        <router-link to="/MyDownloads" class="MyComments commentBox">
          <div class="settingBoxLeft">我的下载</div>
          <div class="settingBoxRight">
            <span>查看</span>
            <span class="rowBox"></span>
          </div>
        </router-link>
        <router-link to="/setting" class="MyComments commentBox">
          <div class="settingBoxLeft">设置</div>
          <div class="settingBoxRight">
            <span class="rowBox"></span>
          </div>
        </router-link>
      </div>
    </div>
    <!-- 关联卡号弹出窗 -->
    <div class="AssociatedCardShadow" v-show="AssociatedCardShadow">
      <div class="fatherBox">
        <div class="AssociatedCard">
          <div class="inputBox">
            <span>关联卡号</span>
            <input type="text" v-model="cardNumber" placeholder="请输入你的卡号/员工号" />
            <input type="password" v-model="password" placeholder="请输入密码 " />
          </div>
          <div @click="determineBtn" class="fomfirmbtn">确定</div>
          <div class="close" @click="cancelBtn"></div>
        </div>
      </div>
      <div class="gray-bg" @click="cancelBtn"></div>
    </div>
    <Footer :current="'1'" Navigation="mine"></Footer>
  </div>
</template>

<script>
import Footer from "@/components/layer/footer";
import controller from "@/components/controllers/controllers";
import url from "@/router/http_conf.js";
export default {
  name: "PersonalCenter",
  components: {
    Footer,
  },
  data() {
    return {
      isNoMember: true,
      AssociatedCardShadow: false, //是否隐藏弹出窗
      cardNumber: "",
      password: "",
      userInfos: "",
      historyList: [], //收听历史
      collectList: [], //我的收藏
      followList: [], //我关注的人
      imgUrl: url,
      isImgUrl: '',
    };
  },
  timer: null,
  created() {
    console.log("getUserInfos");
    this.getUserInfos();
    this.getHistoryData();
    this.getCollectListData();
    this.getFollowList();
  },
  //方法集合
  methods: {
    // 获取用户信息
    getUserInfos() {
      let that = this;
      controller
        .getUserInfo({
          token: localStorage.getItem("token"),
        })
        .then((res) => {
          console.log("获取用户信息", res);
          let userInfos = res.baseData;
          userInfos.listenTimes = (userInfos.listenTimes / 60 / 60).toFixed(2);
          this.isImgUrl =  userInfos.portrait.indexOf("http") != -1
          userInfos.portrait = this.isImgUrl ? userInfos.portrait : that.imgUrl + userInfos.portrait;
          this.userInfos = userInfos;
          localStorage.setItem("userInfo", JSON.stringify(userInfos));
        });
    },
    // 防抖封装方法
    debounce(fun) {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        fun.call(this);
      }, 400);
    },
    // 关联卡号按钮
    AssociatedCardBtn() {
      this.AssociatedCardShadow = !this.AssociatedCardShadow;
    },
    // 取消按钮
    cancelBtn() {
      this.AssociatedCardShadow = false;
      this.cardNumber = "";
      this.password = "";
    },
    // 确定按钮
    determineBtn() {
      console.log(Boolean(this.cardNumber));
      if (!Boolean(this.cardNumber) || !Boolean(this.password)) {
        this.$Toast.show({
          title: "请填写信息",
        });
        return false;
      }
      controller
        .bindCard({
          cardNo: this.cardNumber,
          password: this.password,
        })
        .then((res) => {
          console.log("确定按钮", res);
          if (res.code == 0) {
            wx.showToast({
              title: res.msg,
            });
            this.AssociatedCardShadow = true;
            this.cardNumber = "";
            this.password = "";
            this.isNoMember = false;
            this.$updateScore(2)
            this.getUserInfos();
          }
        })
        .catch((err) => {
          console.log("err", err);
          wx.showToast({
            title: err.data.msg,
            icon: "none",
          });
          this.cardNumber = "";
          this.password = "";
        });
    },
    // 收听历史
    getHistoryData() {
      let that = this;
      controller
        .historyList({
          page: 1,
          token: localStorage.getItem("token"),
        })
        .then((res) => {
          console.log("获取收听历史数据", res);
          let historyList = [];
          res.data.baseData.list.map((item, index) => {
            if (index < 4) {
              historyList.push(item);
            }
          });
          console.log("historyList", historyList);
          that.historyList = historyList;
        });
    },
    // 获取收藏列表数据
    getCollectListData() {
      let that = this;
      controller
        .myCollectList({
          page: 1,
          token: localStorage.getItem("token"),
        })
        .then((res) => {
          console.log("获取收藏列表数据", res);
          let collectList = [];
          res.baseData.list.map((item, index) => {
            if (collectList.length < 4) {
              collectList.push(item);
            }
          });
          this.collectList = collectList;
        });
    },
    // 获取我关注的人列表数据
    getFollowList() {
      let that = this;
      controller
        .followList({
          token: localStorage.getItem("token"),
        })
        .then((res) => {
          console.log("获取我关注的人列表数据", res);
          let followList = [];
          res.baseData.list.map((item, index) => {
            if (index < 4) {
              item.listenTimes = (item.listenTimes / 60 / 60).toFixed(2);
              followList.push(item);
            }
          });
          this.followList = followList;
        });
    },
  },
};
</script>

<style lang="css" scoped>
/*箭头*/
.rowBox {
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
  display: inline-block;
  border-top: 1px solid #a8acbb;
  border-right: 1px solid #a8acbb;
  margin-left: 11px;
}

/* 头部 */
.centerTop {
  padding: 0 32px;
  width: 100%;
  height: 336px;
  box-sizing: border-box;
  background: linear-gradient(45deg, #de8076, #e9aea1);
}

.centerTop .userInfos {
  width: 100%;
  height: 215px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.centerTop .userInfosLeft {
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.userInfosLeft .userName span:first-child {
  font-size: 40px;
  color: #fff;
  font-weight: Bold;
  margin-right: 16px;
}

/* 晒一晒 */
.userInfosLeft .userName .BaskInTheSun {
  display: inline-block;
  width: 104px;
  line-height: 36px;
  text-align: center;
  font-size: 24px;
  font-family: PingFang-SC-Medium;
  color: #fff;
  font-weight: Bold;
  margin-right: 16px;
  border-radius: 18px;
  border: 2px solid #fff;
}

/* 收听时长 */
.listeTime {
  font-size: 20px;
  color: #fff;
}

/* 排名 */
.rankingBox {
  line-height: 35px;
  font-size: 24px;
  color: #fff;
}

.rankingBox span {
  display: inline-block;
  margin-right: 32px;
}

/*用户头像*/
.centerTop .userInfosRight {
  width: 158px;
  height: 158px;
  background-color: #ecb8ae;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.userInfosRight img {
  width: 144px;
  height: 144px;
  border-radius: 50%;
}

/*会员区*/
.memberBox {
  width: 100%;
  height: 121px;
  position: relative;
}

.memberBox img {
  width: 100%;
  height: 121px;
}

/* 会员信息 */
.memberInfos {
  position: absolute;
  bottom: 20px;
  width: 100%;
  height: 60px;
  padding: 0 32px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.memberInfosLeft {
  display: flex;
  align-items: center;
}

.memberInfosLeft .leftImg {
  width: 60px;
  height: 60px;
  margin-right: 13px;
}

.memberInfosLeft .leftImg img {
  width: 100%;
  height: 100%;
}

.memberInfosRight {
  width: 140px;
  line-height: 48px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  border-radius: 24px;
  background: linear-gradient(to bottom, #eca065, #ea8355);
}

.memberInfosRight img {
  width: 20px;
  height: 19px;
  margin-right: 9px;
}

.LeftInfos {
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.LeftInfosOne {
  font-size: 26px;
  color: #f8c8a3;
}

.LeftInfosTwo {
  font-size: 16px;
  color: #f8dbc4;
  display: flex;
  align-items: center;
}

.LeftInfosTwo img {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}

/* 选项区域 */
.centerBottom {
  padding: 0 25px;
  box-sizing: border-box;
  background-color: #fff;
}

/*我的收藏等--区域*/
.centerBottom .collectBox {
  width: 100%;
  border-bottom: 1px solid #f2f2f2;
  padding-top: 20px;
}

.ListenToHistory,
.MyCollection,
.PeopleOfConcern {
  margin: 35px 0;
}

/*收听历史*/
.collectBox .pictureBox {
  display: flex;
  align-items: center;
  margin-top: 28px;
}

.pictureBox .pictureItem {
  width: 158px;
  margin-right: 24px;
}

.pictureItem:last-child {
  margin: 0;
}

.pictureItem .pictureItemBox {
  width: 158px;
  height: 158px;
  border-radius: 4px;
  overflow: hidden;
}

.pictureBox .pictureItem img {
  width: 158px;
  height: 158px;
}

.pictureBox .pictureItem .itemspan {
  font-size: 24px;
  color: #323232;
  font-weight: 500;
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-top: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*关注的人*/
.PeopleOfConcern {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.collectBox .PeopleOfConcernBox {
  display: flex;
  align-items: center;
}

.imgBoxItem {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: -10px 0 5px 1px #fff;
}

.imgBoxItem:first-child {
}

/*我的设置等--区域*/
.centerBottom .settingBox {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
}

/*我的评论*/
.centerBottom .settingBox .MyComments {
  width: 100%;
  height: 80px;
}

.commentBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settingBoxLeft {
  font-size: 32px;
  color: #323232;
  font-weight: bold;
}

.settingBoxRight {
  color: #a8acbb;
  font-size: 24px;
}

/* 关联卡号弹出窗 */
.AssociatedCardShadow ,.fatherBox{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
  z-index: 110;
	background-color: rgba(0, 0, 0, .2);
}
.fatherBox{
	position: relative;
}
.AssociatedCard{
	width: 600px;
	height:718px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 999;
	background: url(https://youyang-cdn.mdshuzhi.com/upload/img_bg.png) no-repeat center center;
	background-size: 100%;
	box-sizing: border-box;
	padding: 216px 45px 60px;
}
/* 按钮组 */
.AssociatedCard .fomfirmbtn{
	width: 100%;
	height: 77px;
	line-height: 77px;
	background-color: #DC786E;
	color: #fff;
	text-align: center;
	font-size: 28px;
	background: linear-gradient(90deg, #DC786E, #E78379);
	border-radius: 39px;
}

/* 输入组 */
.AssociatedCard .inputBox{
	padding: 60px 24px 20px;
	margin-bottom: 60px;
	box-sizing:border-box;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: rgba(0,0,0,0.1) 0 0 10px;
}

.AssociatedCard .inputBox input{
	line-height: 72px;
	height: 72px;
	background: #FFFFFF;
	border: 1px solid #EDEDED;
	border-radius: 8px;
	color: #A8ACBB;
	font-size: 30px;
	margin-bottom: 40px;
	width: 100%;
	text-align: center;
}
.AssociatedCard .close{
	width: 80px;
	height: 80px;
	position: absolute;
	z-index: 10;
	left: 0;
	right: 0;
	bottom: -100px;
	display: inline-block;
	background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_close.png) no-repeat center center;
	background-size: 100%;
	margin: auto;
}

.inputBox input:focus {
  border: none;
  outline: none;
}
</style>
